<template>
  <div>
    <h2>Test2</h2>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition appear >
      <h2 v-show="isShow"  >你好！</h2>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test2",
  data(){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
  h2{
    background-color: #01ff70;
  }
  /* 默认写v 有名字写名字*/
  .v-leave,.v-enter-to{
    transform: translateX(0px)
  }
  .v-enter,.v-leave-to{
    transform: translateX(-100px)
  }
  .v-enter-active,.v-leave-active{
    transition: 0.5s linear;
  }
</style>
